<template>
  <div class="contents">
    <!-- <div class="pet-input-item">
      <span class="pet-item-label">petSize：</span
      ><input @blur="petSizeBlur" :value="petSize" />
    </div>
    <div class="pet-input-item">
      <span class="pet-item-label">step：</span
      ><input @blur="stepBlur" :value="step" />
    </div>
    <div class="pet-name-content">
      <span
        :class="{
          'pet-name-item': true,
          'active-pet-name-item': petNameItem == petName,
        }"
        v-for="(petNameItem, petNameIndex) in petNameList"
        :key="petNameIndex"
        @click="petName = petNameItem"
      >
        {{ petNameItem }}
      </span>
    </div> -->
    <j-web-pet
      :petSize="petSize"
      :name="petName"
      :step="Number(step)"
      :defaultAction="defaultAction"
    ></j-web-pet>
  </div>
</template>
<script>
export default {
  data() {
    return {
      petName: "皮卡丘",
      petSize: "50px",
      step: 20,
      petNameList: [
        "皮卡丘",
        "奇犽",
        "白一护",
        "橘一护",
        "喵老师",
        "蓝染",
        "迪达拉",
        "日向雏田",
      ],
      defaultAction: "run",
    };
  },
  mounted() {},
  methods: {
    petSizeBlur(e) {
      this.petSize = e.target.value;
    },
    stepBlur(e) {
      this.step = e.target.value;
    },
  },
};
</script>
<style scoped lang="less">
.contents {
  margin: auto auto;
  .content-body {
    text-align: center;
  }
  .pet-input-item {
    display: flex;
    margin: 8px;
    .pet-item-label {
      width: 20%;
      text-align: center;
    }
    input {
      width: 50%;
    }
  }
  .pet-name-content {
    display: flex;
    flex-wrap: wrap;
  }
  .pet-name-item {
    padding: 2px 5px;
    margin: 8px;
    border: 1px solid rgb(190, 134, 29);
    cursor: pointer;
  }
  .active-pet-name-item {
    background: rgb(190, 134, 29);
  }
}
</style>
